import { useState } from 'react';
// 导入样式
import './index.css'

const Button = () => {
  return (
    <div>
      <button>点击我</button>
      <div>实际上</div>
    </div>
  )
}

const myStyle = {
  color: 'pink',
  fontSize: '44px'
}
export default function App() {
  let [count, setCount] = useState(1)

  const handleClick = () => {
    // 直接修改 无法引发视图更新
    // count++
    // console.log(count)
    setCount(count + 1)
  }

  const [value, setValue] = useState('你好')
  return (
    <div>
      <h1>6 组件基础</h1>
      <hr />

      <Button></Button>

      <h2>useState</h2>
      <h3>{count}</h3>

      <hr></hr>
      <h2>9 样式控制</h2>

      <div className='foo'>样式侠士</div>
      <div style={{ color: 'green', fontSize: '40px' }}>行内样式控制</div>
      <div style={myStyle}>样式侠士</div>

      <hr></hr>
      <h2>10 表单受控绑定</h2>

      <input value={value} onChange={e => setValue(e.target.value)} />

    </div >
  )
}